<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import { fn } from "storybook/test";
    import { Space } from "../Space";
    import Icon from "@iconify/svelte";
    import Link from "./Link.svelte";

    const { Story } = defineMeta({
        title: "Components/Base/Typography/Link",
        component: Link,
        tags: ["autodocs"],
        argTypes: {
            type: {
                control: { type: "select" },
                options: ["default", "secondary", "warning", "error", "success", "primary"],
                table: {
                    defaultValue: { summary: "default" },
                },
            },
            size: {
                control: { type: "select" },
                options: ["small", "default", "large"],
            },
        },
        args: {},
    });
</script>

{#snippet tempIcon(name: string)}
    <Icon icon={name} />
{/snippet}

<Story name="Link">
    {#snippet template(args)}
        {#snippet iconLink()}
            {@render tempIcon("iconoir:attachment")}
        {/snippet}
        <Space dir="v" inline align="baseline">
            <Link onclick={() => console.log(111)} icon={iconLink}>链接</Link>
            <Link link="http://www.baidu.com" icon={iconLink}>链接</Link>
            <Link link="http://www.baidu.com" icon={iconLink} strong underline>链接</Link>
            <Link link="http://www.baidu.com" icon={iconLink} size="large" strong gradient={["45deg", "#9B59B6", "#3498DB"]}>Gradient Color</Link>
        </Space>
    {/snippet}
</Story>
